<!-- 左 -->
<template>
  <div class="letf-header-box1">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#000"
      text-color="#fff"
      active-text-color="#4b8ed4"
    >
      <!-- <el-submenu index="1">
       
      </el-submenu> -->
      <!-- 工作台 -->
      <!-- @click="Gongzuotai" -->
      <el-menu-item index="1" @click="Gongzuotai">
        <i class="el-icon-setting"></i>
        <span slot="title">工作台</span>
      </el-menu-item>
      <!-- 商品 -->
      <el-submenu index="22">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span slot="title">商品</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="Shangping1">商品管理</el-menu-item>
          <el-menu-item index="1-2" @click="Shangping2">商品分类</el-menu-item>
          <el-menu-item index="1-3" @click="Shangping3">商品规则</el-menu-item>
          <el-menu-item index="1-4" @click="Shangping4">商品评价</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 营销 -->
      <el-submenu index="2" @click="Yingxiao">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span slot="title">营销</span>
        </template>
        <el-menu-item-group>
          <el-submenu index="2-1">
            <span slot="title">秒杀管理</span>
            <el-menu-item index="2-2-1" @click="Yingxiao1"
              >秒杀配置</el-menu-item
            >
            <el-menu-item index="2-2-2" @click="Yingxiao12"
              >秒杀商品</el-menu-item
            >
          </el-submenu>
          <el-menu-item index="2-2" @click="Yingxiao2">砍价管理</el-menu-item>
          <el-menu-item index="2-3" @click="Yingxiao3">直播管理</el-menu-item>
          <el-menu-item index="2-4" @click="Yingxiao4">拼团管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 订单 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">订单</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1" @click="Dingdan1">订单管理</el-menu-item>
          <el-menu-item index="3-2" @click="Dingdan2">订单概述</el-menu-item>
          <el-menu-item index="3-3" @click="Dingdan3">评价管理</el-menu-item>
          <el-menu-item index="3-4" @click="Dingdan4">订单匹配</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 团长 -->
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-claim"></i>
          <span slot="title">团长</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1" @click="Tuanzhang1">团长管理</el-menu-item>
          <el-menu-item index="4-2" @click="Tuanzhang2">团长审核</el-menu-item>
          <el-menu-item index="4-3" @click="Tuanzhang3">团长等级</el-menu-item>
          <el-menu-item index="4-4" @click="Tuanzhang4">设置</el-menu-item>
          <el-menu-item index="4-5" @click="Tuanzhang5">路线</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 门店 -->
      <el-submenu index="5" @click="Mendian">
        <template slot="title">
          <i class="el-icon-s-shop"></i>
          <span slot="title">门店</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1-" @click="Mendian1">申请列表</el-menu-item>
          <el-menu-item index="5-2" @click="Mendian2">配置</el-menu-item>
          <el-menu-item index="5-3" @click="Mendian3">门店</el-menu-item>
          <el-menu-item index="5-4" @click="Mendian4">商品</el-menu-item>
          <el-menu-item index="5-5" @click="Mendian5">订单</el-menu-item>
          <el-menu-item index="5-6" @click="Mendian6">提现</el-menu-item>
          <el-menu-item index="5-7" @click="Mendian7">到店付款</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 仓库 -->
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-s-goods"></i>
          <span slot="title">仓库</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="6-1" @click="Changku1">仓库管理</el-menu-item>
          <el-menu-item index="6-2" @click="Changku2">配置小区</el-menu-item>
          <el-menu-item index="6-3" @click="Changku3">入库管理</el-menu-item>
          <el-menu-item index="6-4" @click="Changku4">入库查询</el-menu-item>
          <el-menu-item index="6-5" @click="Changku5"
            >出库管理(以下都没有路由)</el-menu-item
          >
          <el-menu-item index="6-6" @click="Changku6">出库查询</el-menu-item>
          <el-menu-item index="6-7" @click="Changku7">盘点管理</el-menu-item>
          <el-menu-item index="6-8" @click="Changku8">观有库存</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 分销 -->
      <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span slot="title">分销</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="7-1" @click="Fenxiao1">超级会员</el-menu-item>
          <el-menu-item index="7-2" @click="Fenxiao2">代理商</el-menu-item>
          <el-menu-item index="7-3" @click="Fenxiao3">运营商</el-menu-item>
          <el-menu-item index="7-4" @click="Fenxiao4">佣金记录</el-menu-item>
          <el-menu-item index="7-5" @click="Fenxiao5">会员审核</el-menu-item>
          <el-menu-item index="7-6" @click="Fenxiao6">设置</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 小程序 -->
      <el-submenu index="8">
        <template slot="title">
          <i class="el-icon-platform-eleme"></i>
          <span slot="title">小程序</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="8-1" @click="Xiaoxu1">支付</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 权限 -->
      <el-submenu index="9">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span slot="title">权限</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="9-1" @click="Quanxian1">员工管理</el-menu-item>
          <el-menu-item index="9-2" @click="Quanxian2">角色管理</el-menu-item>
          <el-menu-item index="9-3" @click="Quanxian3">服务管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isCollapse: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //工作台
    Gongzuotai() {
      this.$router.push("/Gong");
    },
    //商品
    Shangping1() {
      this.$router.push("/Shang1");
    },
    Shangping2() {
      this.$router.push("/Shang2");
    },
    Shangping3() {
      this.$router.push("/Shang3");
    },
    Shangping4() {
      this.$router.push("/Shang4");
    },
    //营销
    Yingxiao1() {
      this.$router.push("/YangMaos1");
    },
    // Yingxiao11() {
    //   this.$router.push("");
    // },
    Yingxiao12() {
      this.$router.push("/YangMaos2");
    },
    Yingxiao2() {
      this.$router.push("/Yingx2");
    },
    Yingxiao3() {
      this.$router.push("/Yingx3");
    },
    Yingxiao4() {
      this.$router.push("/Yingx4");
    },
    //订单
    Dingdan1() {
      this.$router.push("/Ding1");
    },
    Dingdan2() {
      this.$router.push("/Ding2");
    },
    Dingdan3() {
      this.$router.push("/Ding3");
    },
    Dingdan4() {
      this.$router.push("/Ding4");
    },
    //团长
    Tuanzhang1() {
      this.$router.push("/Tuan1");
    },
    Tuanzhang2() {
      this.$router.push("/Tuan2");
    },
    Tuanzhang3() {
      this.$router.push("/Tuan3");
    },
    Tuanzhang4() {
      this.$router.push("/Tuan4");
    },
    Tuanzhang5() {
      this.$router.push("/Tuan5");
    },
    //门店
    Mendian1() {
      this.$router.push("/Men1");
    },
    Mendian2() {
      this.$router.push("/Men2");
    },
    Mendian3() {
      this.$router.push("/Men3");
    },
    Mendian4() {
      this.$router.push("/Men4");
    },
    Mendian5() {
      this.$router.push("/Men5");
    },
    Mendian6() {
      this.$router.push("/Men6");
    },
    Mendian7() {
      this.$router.push("/Men7");
    },
    //仓库
    Changku1() {
      this.$router.push("/Chang1");
    },
    Changku2() {
      this.$router.push("/Chang2");
    },
    Changku3() {
      this.$router.push("/Chang3");
    },
    Changku4() {
      this.$router.push("/Chang4");
    },
    Changku5() {
      this.$router.push("/Chang5");
    },
    Changku6() {
      this.$router.push("/Chang6");
    },
    Changku7() {
      this.$router.push("/Chang7");
    },
    Changku8() {
      this.$router.push("/Chang8");
    },
    //分销
    Fenxiao1() {
      this.$router.push("/Fen1");
    },
    Fenxiao2() {
      this.$router.push("/Fen2");
    },
    Fenxiao3() {
      this.$router.push("/Fen3");
    },
    Fenxiao4() {
      this.$router.push("/Fen4");
    },
    Fenxiao5() {
      this.$router.push("/Fen5");
    },
    Fenxiao6() {
      this.$router.push("/Fen6");
    },
    // //小程序
    Xiaoxu1() {
      this.$router.push("/Xiaoc1");
      // 支付
    },
    // //权限
    Quanxian1() {
      this.$router.push("/Quan1");
    },
    Quanxian2() {
      this.$router.push("/Quan2");
    },
    Quanxian3() {
      this.$router.push("/Quan3");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss'>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
//隐藏滚动条-----上
.letf-header-box1::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.letf-header-box1 {
  width: 100%;
  // flex: 1;
  height: 100%;
  background: rgb(0, 0, 0);
  // overflow-x: hidden;
  //////隐藏滚动条-----下
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>